/*
  学习目标：使用setState修改状态
  语法:  this.setState({状态名: 新值})
  注意:
    1. 💥不可变数据.  不允许修改到原始数据
    2. push ++ 等方法都不能用
*/
// 快捷键: rcc
import React, { Component } from 'react';

export default class App extends Component {
  state = {
    msg: 'hello React',
    count: 99,
    list: [1, 2, 3],
  };

  handleAdd = () => {
    // 修改数据唯一的方式, 就是调用setState
    this.setState({ count: this.state.count + 1 });

    // 注意:  不可变数据,. 不允许直接修改state, 必须使用新值覆盖旧值
    // ❌ 一下这些写法都是错误的. 会改变原始数据
    // this.state.msg = 'hello 80';
    // this.state.list.push(4);
    // this.setState({ list: [...this.state.list, 4] });
  };

  render() {
    return (
      <div>
        <h1>
          {this.state.msg} - {this.state.count}
        </h1>
        <h2>{this.state.list}</h2>
        <button onClick={this.handleAdd}>点我+1</button>
      </div>
    );
  }
}
